<template>
    <Header :info="state" />
    <StatisticsSearch class="search_box" :options="statisOptions" @submit="onSubmit" />
    <Quantity :basic="state" />
    <Statistics :chart="statsChart" />
    <div class="scale">
        <PieCard :title="`区域客户分布占比`" :browse-data="statsChart.region"></PieCard>
        <p class="m_l"></p>
        <visualMap :title="`行政区域客户分布`" :browse-data="statsChart.pca"></visualMap>
    </div>
    <Tablelist ref="TablelistRef" :paramselist="paramselist" />
</template>

<script setup lang="ts">
import Header from './components/Header.vue';
import Quantity from './components/Quantity.vue';
import Statistics from './components/Statistics.vue';
import Tablelist from './components/Tablelist.vue';
import PieCard from './components/PieCaed.vue';
import visualMap from './components/visualMap.vue';
import { statchartList, statinfoList, getRegionList } from '@/api/customer/groupManage/lbspullgroup';
import StatisticsSearch from '@/components/zw/statistics-search/StatisticsSearch.vue';

import { ref, reactive, onMounted, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import { getDay } from '@/utils/utils';
import dayjs from 'dayjs';

const route = useRoute();
const regionList = reactive<Array<any>>([]);
const TablelistRef = ref<any>(null);
const params = reactive({
    id: route.query.id || 1,
    create_time: [getDay(-6), getDay(0, true)],
    region_id: 0
});
//列表传参
const paramselist = reactive({
    id: route.query.id,
    create_time: [getDay(-6), getDay(0, true)],
    region_id: 0
});
const state: any = ref({});

const dayTime = 1000 * 60 * 60 * 24;
const statisOptions = reactive([
    {
        label: '时间筛选',
        type: 'dateFilter',
        // currentId: 0,
        disabledDate(date: any) {
            const { activity_time, period_type, created_at, real_begin_date, real_end_date } = state.value;
            const nowDate = +new Date(date);
            if (period_type === 1) {
                return nowDate < +new Date(created_at) - dayTime;
            }
            let [startDate, endDate] = activity_time || [];
            startDate = dayjs(real_begin_date ?? startDate).format('YYYY-MM-DD 00:00:00');
            endDate = dayjs(real_end_date ?? endDate).format('YYYY-MM-DD 00:00:00');
            return nowDate < +new Date(startDate) || nowDate > +new Date(endDate);
        }
    },
    {
        label: '活动区域',
        type: 'select',
        key: 'region_id',
        placeholder: '请选择活动区域',
        optionList: regionList
    }
]);

const onSubmit = (data: any) => {
    nextTick(() => {
        if (data.times) {
            funlist(data);
        }
    });
};

const onGetRegionList = async () => {
    const res = await getRegionList({ id: route.query.id });
    if (Array.isArray(res.url)) {
        regionList.splice(0, regionList.length, ...res.url);
    }
};
onGetRegionList();
const funlist = (data?: any) => {
    params.create_time = data.times || [];
    params.region_id = data.region_id || 0;
    paramselist.create_time = data.times || [];
    paramselist.region_id = data.region_id || 0;
    TablelistRef.value.getstatdetailListFun();
    getstatinfoListFun();
    getstatchartListFun();
};

// 统计活动信息
const statsChart: any = ref({});
const getstatchartListFun = async (data?: any) => {
    const res = await statchartList(params);
    res.nameList.push('全部');
    const allData: any = {};

    if (res.dataList?.[0]) {
        for (const key in res.dataList[0]) {
            const item = res.dataList[0][key];
            const sumIt = item.map((sumItem: any, sumIndex: number) => {
                let num = 0;
                res.dataList.forEach((numItem: Array<any>) => {
                    num += numItem[key][sumIndex];
                });
                return num;
            });
            allData[key] = sumIt;
        }
        res.dataList.push(allData);
    }

    res.region.forEach((val: any) => {
        val.name = val.region_name;
        val.value = val.region_num;
    });
    statsChart.value = res;
};
// 统计基本信息
const getstatinfoListFun = (data?: any) => {
    statinfoList(params).then((res: any) => {
        state.value = res;
    });
};
</script>

<style lang="scss" scoped>
.scale {
    display: flex;
    align-items: center;
    margin-top: 16px;

    .m_l {
        width: 15px;
    }
}
.search_box {
    margin-bottom: 16px;
}
</style>
